<template>
	<div ref="el" class="up-scroll-list">
		<div class="flex justify-between items-center">
			<up-title
				:title="title"
				:titleT="titleT"
				:icon="icon"
				:iconColor="iconColor"
				class="cursor-pointer"
				@click="emits('seeAll')" />
			<div class="flex">
				<div
					v-if="seeAll"
					class="mr-[10px] h-7 px-4 rounded-lg bg-bg-3 flex items-center app-bg-react text-t-2"
					@click="emits('seeAll')">
					{{ $t('action.seeAll') }}
				</div>
				<up-page-btns
					:prev-disabled="!hasPrev"
					:next-disabled="!hasNext"
					@prev="onPrev"
					@next="onNext" />
			</div>
		</div>
		<n-carousel
			class="base-swiper"
			v-if="total"
			:current-index="currIndex"
			:slides-per-view="pageSize"
			:space-between="10"
			:show-dots="false"
			:loop="false"
			@update:current-index="onChange"
			v-bind="$attrs">
			<slot></slot>
		</n-carousel>
		<div v-else class="flex justify-center py-2">
			<base-empty></base-empty>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { NCarousel } from 'naive-ui'
import UpTitle from '../up-title/index.vue'
import UpPageBtns from '../up-page-btns/index.vue'
import { useListCols } from '@/hooks'
import { BaseEmpty } from '@/components/base'

const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	titleT: {
		type: String,
		default: ''
	},
	icon: {
		type: String,
		default: ''
	},
	iconColor: {
		type: String,
		default: 'var(--color-primary)'
	},
	seeAll: {
		type: Boolean
	},
	total: {
		type: Number,
		default: 0
	},
	multiple: {
		type: Number,
		default: 1
	}
})

const emits = defineEmits(['seeAll'])

const el = ref(null)

const { cols } = useListCols(el)

const currIndex = ref(0)

const pageSize = computed(() => cols.value * props.multiple)

const onChange = (val: number) => {
	currIndex.value = val
}

const hasNext = computed(() => {
	return pageSize.value + currIndex.value < props.total
})

const onNext = () => {
	currIndex.value = currIndex.value + pageSize.value
}

const hasPrev = computed(() => currIndex.value > 0)

const onPrev = () => {
	currIndex.value = currIndex.value - pageSize.value
}
</script>
